{{ extend './_layouts/aboutLayout.html' }}

{{ block 'title'}}
历史订单
{{ /block }}

{{ block 'head'}}

<link rel="stylesheet" href="/public/css/about.css">
{{ /block}}


<!-- 填写内容 -->
{{ block 'content' }}
<!-- start cart header  -->
<div class="jumbotron">
    <div class="header_container">
    </div>
</div>
<!-- end cart header  -->

<!-- start container  -->
<div class="container">

    <div class="row row-offcanvas row-offcanvas-right" id="container-row">

        <div class="col-xs-6 col-md-4 sidebar-offcanvas " id="sidebar">

            <div class="list-group list-gp">
                <ul>
                    <li>
                        <img src="{{ user.avatar}}" alt="" style="width: 60px;height: 60px;">
                    </li>
                    <li>
                        <h3>{{ user.nickname }}</h3>
                    </li>
                    <hr>
                    <li>
                        <a href="/about/setting" class="list-group-item ">设置</a>
                    </li>
                    <li>
                        <a href="/about/orderlist" class="list-group-item active">订单</a>
                    </li>
                </ul>


            </div>
        </div>
        <!--/.sidebar-offcanvas-->
        <!-- col-xs-12 col-sm-9 -->

        <div class="col-xs-12 col-sm-6 col-md-8" id="right-sidebar">
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        历史订单
                    </div>
                    <div class="panel-body">
                        {{ each orderList value index }}

                        <div class="panel panel-default">
                            <!-- Default panel contents -->
                            <div class="panel-heading">
                                <h5>订单 {{ index + 1 }}</h5>
                            </div>
                            <div class="panel-body">
                                <span><strong>收货人：&nbsp;</strong>{{value.nickname}}</span>
                                <span><strong>电话:&nbsp;</strong>{{ value.cellphone}}</span> <span><strong>总金额:&nbsp;</strong>￥{{ value.totalPrice}}</span>
                                <br>
                                <span><strong>地址:&nbsp;</strong>{{ value.address}}</span>
                                <span><strong>创建时间:&nbsp;</strong>{{ value.created_time}}</span>
                                
                            </div>

                            <!-- goods -->
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <caption><strong>商品详情</strong></caption>
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>商品名</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{ each value.cartList data}}
                                        <tr>
                                            <th>
                                                <img src="{{data.img}}" alt="" width="40px" height="40px">
                                            </th>
                                            <td>{{data.fname}}</td>
                                            <td>￥{{data.price}}</td>
                                            <td>{{data.productNum}}</td>
                                        </tr>
                                        {{ /each }}
                                    </tbody>
                                </table>
                            </div>
                            <div class="btn_del">
                                <hr>
                                <a href="javascript:;" class="btn btn-success" id="payment">付款</a>
                                <a href="javascript:;" class="btn btn-danger" onclick="cancelOrder(this)"
                                    value="{{ value._id }}">取消</a>
                            </div>

                        </div>
                        {{ /each}}

                    </div>

                </div>
            </div>


        </div>
        <!--/row-->
    </div>
    <!--/.col-xs-12.col-sm-9-->

</div>
<!-- end container  -->
{{ /block }}


{{ block 'script'}}
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/art-template/lib/template-web.js"></script>

<script>

    function cancelOrder(obj) {
        var orderId = $(obj).attr('value')
        // console.log(orderId);
        var check = confirm('是否取消订单？')
        if (check) {
            $.ajax({
                type: "post",
                url: "/goods/remove",
                data: {
                    orderId: orderId
                },
                dataType: 'json',
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.alert('订单取消成功！')
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/about/orderlist'
                    } else if (err_code === 500) {
                        window.alert(data.message)
                    }
                }
            });
        }

    }

    function getIndex(obj) {
        var orderIndex = $(obj).attr('value')
        // console.log(orderIndex);
        $.ajax({
            type: "get",
            url: "/goods/details",
            data: {
                orderIndex: orderIndex
            },
            dataType: "json",
            success: function (data) {
                var err_code = data.err_code
                if (err_code == 0) {
                    console.log(data.message);
                    // $('#inputNickname').val('data.message')


                } else if (err_code == 500) {
                    window.alert('服务器忙，请稍后重试！')

                }
            }
        });
    }

    document.querySelector('#payment').addEventListener("click", function () {
        window.alert("别点啦穷鬼，你吃不起~");
    })

    function timestamp(value) {
        var date = new Date(value);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '/' + m + '/' + d;
    }
</script>

{{/block}}